<template>
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <section class="col-span-1 lg:col-span-1">
      <div class="bg-white shadow rounded-lg p-4">
        <h2 class="text-lg font-medium mb-3">行情表格</h2>
        <MarketTable />
      </div>
    </section>

    <section class="col-span-1 lg:col-span-1">
      <div class="bg-white shadow rounded-lg p-4 mb-6">
        <h2 class="text-lg font-medium mb-3">波动率曲线</h2>
        <VolatilityChart />
      </div>
    </section>

    <section class="col-span-1 lg:col-span-1">
      <div class="bg-white shadow rounded-lg p-4">
        <h2 class="text-lg font-medium mb-3">K 线图（含 MA）</h2>
        <KlineChart />
      </div>
    </section>

    <section class="col-span-1 lg:col-span-2">
      <div class="bg-white shadow rounded-lg p-4">
        <h2 class="text-lg font-medium mb-3">策略表单（步骤流）</h2>
        <StrategyForm />
      </div>
    </section>
  </div>
</template>

<script setup>
import MarketTable from '../components/MarketTable.vue'
import VolatilityChart from '../components/VolatilityChart.vue'
import KlineChart from '../components/KlineChart.vue'
import StrategyForm from '../components/StrategyForm.vue'
</script>
